<template>
    <div class="chart">
        <el-card>
            <template #header>
                <div class="card-header">
                    <span>其他巡检</span>
                </div>
            </template>
            <el-row>
                <el-col :span="12">
                    <div id="otherInspectionChart1" class="chartsBox" v-show="isShowChart1"></div>
                    <el-empty description="暂无数据" v-show="!isShowChart1"/>
                </el-col>
                <el-col :span="12">
                    <div id="otherInspectionChart2" class="chartsBox" v-show="isShowChart2"></div>
                    <el-empty description="暂无数据" v-show="!isShowChart2"/>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { otherInspection } from '@/api/bigData/storeInspection.js';
import { nextTick } from 'vue';
const isShowChart1 = ref(false)
const isShowChart2 = ref(false)
const otherInspectionChart1 = shallowRef(null)
const otherInspectionChart2 = shallowRef(null)
defineExpose({getData})

function getData(data) {
    // dis 已处理
    let url = `/intelligent/store/otherInspection?serviceId=${toRaw(data).serviceId}&shopId=${toRaw(data).shopId}&startDateTime=${toRaw(data).startDateTime}&endDateTime=${toRaw(data).endDateTime}`
    otherInspection(url).then(res=>{
        if(res.data) {
            if(res.data?.dtoOne?.dispose || res.data?.dtoOne?.problem) {
                isShowChart1.value = true;
                nextTick(()=>{
                    otherInspectionChart1.value = echarts.init(document.getElementById('otherInspectionChart1'));
                    let option1 = getOption(
                        {
                            title: '抓拍巡检',
                            ...res.data.dtoOne,
                            color: ['#e6a23c','#ddd']
                        }
                    )
                    otherInspectionChart1.value.setOption(option1)
                    window.addEventListener('resize', () => {
                        otherInspectionChart1.value.resize()
                    })
                })  
            }
            else {
                isShowChart1.value = false
            }


            if(res.data?.dtoTwo?.dispose || res.data?.dtoTwo?.problem) {
                isShowChart2.value = true;
                nextTick(()=>{
                    otherInspectionChart2.value = echarts.init(document.getElementById('otherInspectionChart2'));
                    let option2 = getOption(
                        {
                            title: '收银巡检',
                            ...res.data.dtoTwo,
                            color: ['#409efe','#ddd']
                        }
                    )
                    otherInspectionChart2.value.setOption(option2)
                    window.onresize = ()=> {
                        otherInspectionChart2.value.resize();
                    };
                })  
            }
            else {
                isShowChart2.value = false
            }
        }else{
            isShowChart1.value = false
            isShowChart2.value = false
        }
    })
}

function getOption(item){
    return {
        title: {
          text: item.title,
          left: 'center',
          top: '48%',
          textStyle: {
            fontSize: 14,
            color: '#2BCAFF',
            align: 'center'
          },
          subtextStyle: {
            fontFamily: "微软雅黑",
            fontSize: 24,
            color: '#fff',
          }
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: item.title,
                type: 'pie',
                radius: ['30%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'inner',
                    formatter: (params) => {
                        return params.data.name + ' ' + params.data.value;
                    }
                },
                color: item.color,
                labelLine: {
                    show: false
                },
                data: [
                    { value: item.dispose, name: '已处理' },
                    { value: item.problem, name: '有问题' },
                ]
            }
        ]
    };
}

</script>
<style lang="scss" scoped>
.card-header{
    font-weight: bold;
}
.chartsBox {
    width: 100%;
    height: 400px;
}
.el-empty{
    width: 100%;
    height: 400px;
}
</style>